<template>
  <div class="article-detail">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'ArticleList' }">文章列表</el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ editMode ? `编辑文章 -- ${title}` : '新增文章' }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :model="info" ref="articleForm" label-position="top" :rules="articleRule">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="info.title" class="a-title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文章ID" prop="id">
            {{ info.id }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-form-item label="文章主体" prop="content">
            <editor v-model="info.content"></editor>
          </el-form-item>
        </el-form-item>
      </el-row>
    </el-form>
    <edit-bar>
      <el-button type="success" v-if="info.id" @click="save" :loading="saving">
        修改
      </el-button>
      <el-button type="primary" v-else @click="save" :loading="saving">
        新增
      </el-button>

      <el-button v-if="info.id">
        PC版本:
        <a :href="`https://ke.movtile.com/article/${info.id}`" target="_blank">
          https://ke.movtile.com/article/{{ info.id }}
        </a>
      </el-button>
      <el-button v-if="info.id">
        移动端版本
        <a :href="`https://ke.movtile.com/article/${info.id}?hl=1`" target="_blank">
          https://ke.movtile.com/article/{{ info.id }}?hl=1
        </a>
      </el-button>
    </edit-bar>
  </div>
</template>

<script>
  import EditMixins from 'mixins/Edit';
  import EditBar from 'comp/EditBar';
  import Editor from 'comp/Editor';
  import { FormRuleConf } from '@/config';

  export default {
    mixins: [EditMixins],
    components: {
      Editor,
      EditBar,
    },
    data() {
      return {
        title: '',
        saving: false,
        ...FormRuleConf.Article,
      };
    },
    methods: {
      /**
       * 获取频道详情
       */
      getInfo() {
        if (!this.id || this.$route.name != 'ArticleDetail' || this.infoGetting) return;

        this.infoGetting = true;
        this.$service
          .ArticleInfo({ id: this.id })
          .then((res) => {
            this.info = { ...res };
            this.title = res.title;
          })
          .finally(() => {
            this.infoGetting = false;
          });
      },
      /**
       * 保存频道信息
       */
      save() {
        if (this.saving) return;
        this.$refs['articleForm'].validate((valid) => {
          if (valid) {
            this.saving = true;
            this.$service
              .ArticleSave(this.info, JSON_HEADER)
              .then((res) => {
                this.$message.success('提交成功!');
                if (!this.info.id) {
                  this.$tabs.close();
                }
              })
              .finally(() => {
                this.saving = false;
              });
          }
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .article-detail {
    padding-bottom: 50px;
  }

  .a-title /deep/ .el-input__inner {
    font-size: 30px;
    font-weight: bolder;
    height: auto;
  }
</style>
